<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  <style>
    .myPanel {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    #cesiumContainer{
      width: 100%;
      height: 700px;
    }
  </style>
  <script src="./libs/Cesium/Cesium.js"></script>
  <link href="./libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="./libs/netcdfjs.min.js"></script>
    <!--删除-->
  <script src="../dist/cesium-wind.js"></script>
</head>
<body>
  <button onclick="addLayer()">添加图层</button>
  <button onclick="hideLayer()">隐藏图层</button>
  <button onclick="showLayer()">显示图层</button>
  <button onclick="updateParm()">更改参数</button>
  <button onclick="removeLayer()">销毁图层</button>
<div id="cesiumContainer"></div>
<script>
    var options = {
        baseLayerPicker: false,
        geocoder: false,
        infoBox: false,
        fullscreenElement: 'cesiumContainer',
        scene3DOnly: true,
        imageryProvider: new Cesium.SingleTileImageryProvider({url:""})
    }
    // options.useDefaultRenderLoop = false;
    const viewer = new Cesium.Viewer('cesiumContainer', options);
    const map = {viewer};//简易的map
    let cesiumWind = null;
    function addLayer(){
      var url = "./data/demo.nc";
       cesiumWind = new CesiumWind(url);
      cesiumWind.addToMap(map);
    }
    function hideLayer(){
      cesiumWind.show =false;
    }
    function showLayer(){
      cesiumWind.show =true;
    }
    function updateParm(){
      const option = {
        maxParticles: 64 * 64,
      particleHeight: 100.0,
      fadeOpacity: 0.996,
      dropRate: 0.003,
      dropRateBump: 0.01,
      speedFactor: 1.0,
      lineWidth: 14.0,
      particlesTextureSize:64
      };
      cesiumWind.updateOption(option);
    }
    function removeLayer(){
      cesiumWind.removeByMap();
    }

    

    //   window.addEventListener('particleSystemOptionsChanged', function () {
      // that.particleSystem.applyUserInput(that.panel.getUserInput());
        // });
        // window.addEventListener('layerOptionsChanged', function () {
        //     that.setGlobeLayer(that.panel.getUserInput());
        // });
</script>
</body>
</html>